<template>
	<div>
		<div class="myself">
			<router-link to="set" class="logo">
				<img src="../../../static/myself/MyCenter/MyCenter07.png" width="25" height="25" />
			</router-link>
			<div class="avatar">
				<div class="avatar-content">
					<img :src="imgUrlfirst+imgurl" onerror="this.src='./static/imgs/set-logo.png'" />
				</div>
			</div>
			<p v-html="datlist.userName">我是孙悟空</p>
		</div>

		<div class="main">
			<mt-cell class='tie' title="通讯录" to='/addressbook' v-show="false">
				<span>
					<img src="../../../static/myself/MyCenter/pgdn.png" width="11" height="20" />
				</span>
				<img slot="icon" src="../../../static/myself/MyCenter/MyCenter01.png" width="30" height="30" />
			</mt-cell>
			<mt-cell title="我的消息" to='/message'>
				<span>
					<img src="../../../static/myself/MyCenter/pgdn.png" width="11" height="20" />
				</span>
				<img slot="icon" src="../../../static/myself/MyCenter/MyCenter03.png" width="30" height="30" />
			</mt-cell>
			<mt-cell title="我的收藏" to='/collect'>
				<span>
					<img src="../../../static/myself/MyCenter/pgdn.png" width="11" height="20" />
				</span>
				<img slot="icon" src="../../../static/myself/MyCenter/MyCenter04.png" width="30" height="30" />
			</mt-cell>
			<mt-cell title="阅读记录" to='/readinglog'>
				<span>
					<img src="../../../static/myself/MyCenter/pgdn.png" width="11" height="20" />
				</span>
				<img slot="icon" src="../../../static/myself/MyCenter/MyCenter05.png" width="30" height="30" />
			</mt-cell>

		</div>

		<div>
			<tabbar></tabbar>
		</div>

	</div>
</template>

<script>
import tabbar from "./../subcom/tabbar.vue";
import baseurl from "./../../api/baseurl.js";

export default {
  components: {
    tabbar
  },
  name: "myself",
  data() {
    return {
      msg: "Welcome",
      userid: "",
      datlist: {},
      imgurl: ""
    };
  },
  created() {
    this.imgUrlfirst = baseurl.imgUrl;
    // var str = localStorage.getItem("userid");//取回students变量
    var str = localStorage.getItem("userid"); //取回students变量
    this.userid = JSON.parse(str); //把字符串转换成JSON对象
    this.getinfo();
  },
  methods: {
    getinfo() {
      this.$http({
        method: "get",
        url: baseurl.urls + "/userhead/selectUserhead",
        params: {
          userid: this.userid
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.datlist = response.data.date;
            console.log(this.datlist);
            this.imgurl = response.data.date.userPortrait;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  watch: {
    selected: function(val, oldVal) {
      // 这里就可以通过 val 的值变更来确定
      if (val == "我的") {
        this.$router.push({ path: "myself" });
      } else if (val == "首页") {
        this.$router.push({ path: "/home" });
      } else if (val == "书架") {
        this.$router.push({ path: "/schoolroom" });
      }
    }
  }
};
</script>

<style scoped>
.main {
  margin-bottom: 100px;
}
.mint-cell {
  margin-top: 1px;
}

.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.clearfloat {
  zoom: 1;
}

.myself {
  width: 100%;
  height: 250px;
  background: #e60012;
  overflow: hidden;
}

.myself .logo {
  float: right;
  margin-right: 15px;
  /*background: #8A2BE2;*/
  margin-top: 15px;
  display: block;
}

.myself .avatar {
  width: 92px;
  height: 92px;
  background: #e60012;
  margin: 0 auto;
  margin-top: 50px;
  border-radius: 50%;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.myself .avatar .avatar-content {
  width: 68px;
  height: 68px;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.myself .avatar .avatar-content img {
  width: 65px;
  height: 65px;
  text-align: center;
}
.myself p {
  text-align: center;
  margin-top: 16px;
  color: #ffffff;
  font-size: 16px;
  font-family: "microsoft yahei";
}
.mint-cell {
  min-height: 60px;
}

.mint-cell-title {
  font-size: 15px;
}

/*cell边距*/
.mint-cell-wrapper {
  padding: 0 15px;
}
</style>
